<template>
  <div id="ppppp2" style="height: 30vh;width: 100%;"></div>
</template>
<script>
import * as echarts from "echarts";
require("echarts"); // echarts theme
export default {
  name: "pieEchart",
  data() {
    return {
      chart: null,
      options: {},
      max: "", //最大value值
      min: "", // 最小value值
      type: 0
    };
  },
  props: {
    listData: {
      type: Array,
      default: () => []
    },
    id: {
      type: String,
      default: "1"
    }
  },
  watch: {
    listData: {
      handler(val, newVal) {
        this.initOptions(val);
        this.initCharts();
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    // this.getData();
  },
  mounted() {
    setTimeout(() => {
      this.initOptions();
      this.initCharts();
    }, 1000);
    // this.initOptions(this.listData);
    // this.initCharts();
  },
  methods: {
    initOptions(list) {
      this.options = {
        tooltip: {
          trigger: "item"
        },
        legend: {
          top: "5%",
          left: "center"
        },
        series: [
          {
            name: "分险等级",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: "小型企业 45%" },
              { value: 735, name: "中型企业 32%" },
              { value: 580, name: "大型企业 8%" },
              { value: 484, name: "超大型企业 4%" }
            ]
            // data: list
          }
        ]
      };
    },
    initCharts() {
      this.chart = echarts.init(document.getElementById("ppppp2"));
      this.chart.setOption(this.options, true);
    }
  }
};
</script>
